<template lang='pug'>
  section
    van-nav-bar(
      title="积分明细"
      left-arrow
      @click-left="$router.back()"
      )
    header
      .avatar(:style='{backgroundImage: `url(${user && user.user && user.userWx.headImageUrl})`}')
      .credit 总积分：
        span.amount 0
      p.color-l 会员自身或者被推荐人使用现金购买商品，点击确认收货，确定为有效订单后，根据购物的金额，可以获得购物积分。
    van-list(
      v-model="loading"
      :finished="finished"
      @load="onLoad"
      )
      .list-item.border-1px(
        v-for="item in list"
        :key="item.id"
        )
        time {{item.createdTime}}
        .type {{item.changeType | typeValue}}
        .value {{item.changePoints}}

        
</template>

<script type='text/ecmascript-6'>
  export default {
    components: {

    },
    data() {
      return {
        list: [],
        loading: false,
        finished: false,
        pageSize: 30,
        pageNum: 1,
      }
    },
    computed: {
      user() { return this.$store.state.authUser || {} },
      userId() {
        if (!this.user ||!this.user.user) return ''
        return this.user.user.id
      },
    },
    filters: {
      typeValue(value) {
        if (!value) return ''
        const arr = ['', '购物返回', '提现扣除', '购物支出', '代言奖励']
        return arr[value]
      }
    },
    methods: {

      async onLoad() {
        const data = {
          userId: this.userId,
          pageSize: this.pageSize,
          pageNum: this.pageNum,
        }

        this.loading = true
        const resp = await this.$post('/api/platform/point/pointPage', data)
        this.loading = false

        const _list = resp.data.list || []

        if (_list.length < this.pageSize) this.finished = true
        this.list = [...this.list, ..._list]
        // console.log('_list', _list)

      }
    }
  }
</script>

<style lang='stylus' rel='stylesheet/stylus' scoped>

@import '~assets/stylus/variable.styl'
@import '~assets/stylus/mixin.styl'
 
header
  padding 2rem 1rem
  text-align center
  line-height 1.3
  p
    text-align left

.list-item
  padding 1rem
  display flex
  justify-content space-between
  border-1px($color-border-l)
</style>
